<template>
    <footer>
        <div class="f_up">
            <div>
                <div>
                    <img src="/img/tuzi@2x.png" alt="">
                </div>
                <div>
                    <img src="/img/dibu.png" alt="" style="height: 150px;">
                </div>
            </div>
        </div>
        <div class="f_down">
            <div>
                <div>
                    <div>
                        <p>热门城市租房</p>
                        <ul>
                            <li v-for="str,i of arr" :key="i"><a href="#">{{str}}</a></li>
                        </ul>
                    </div>
                    <div>
                        <p>推荐区域租房</p>
                        <ul>
                              <li v-for="str,i of qu" :key="i"><a href="#">{{str.qname}}</a></li>
                        </ul>

                    </div>
                    <div>
                        <p>推荐地铁租房</p>
                        <ul>
                              <li v-for="str,i of subway" :key="i"><a href="#">{{str.wxian}}</a></li>
                        </ul>
                    </div>
                    <div>
                        <p>推荐类型租房</p>
                        <ul>
                             <li v-for="str,i of arr4" :key="i"><a href="#">{{city}}{{str}}</a></li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div>
                        <div>
                            <ul>
                                <li><a href="#">关于巴乐兔</a>
                                    <p>伙伴登录</p>
                                    <p>网站地图</p>
                                    <p>巴乐兔社区</p>
                                </li>
                                <li><a href="#">巴乐兔合作公寓</a>
                                    <p>青年汇</p>
                                    <p>银桥公寓</p>
                                    <p>爱家精品公寓...</p>
                                </li>
                                <li><a href="#">意见反馈</a>
                                    <p>Mail:service@baletu.com</p>
                                    <p>联系巴乐兔</p>
                                    <p>10106006</p>
                                    <p>周一~周日8:00~23:00</p>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <div>
                                <p>扫码下载巴乐兔APP</p>
                                <img src="/img/baletuLogo1.png" alt="">
                            </div>
                            <div>
                                <p>扫码下载巴乐兔APP</p>
                                <img src="/img/code.png" alt=""></div>
                        </div>

                    </div>
                    <div>
                        <p><span>©2015 上海万间信息技术有限公司</span><span><span>营业执照 </span><span>隐私政策 </span><span> 上海市张江高科晨晖路88号1号楼4层</span></span>
                        </p>
                        <p><span><img src="/img/gongan.png" alt="">沪公网安备31011502006937号</span><span>增值电信业务许可证: 沪B2-20170251</span></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</template>
<script>
import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState(['cid','city'])
    },
    data(){
        return{
            arr:['上海租房','北京租房','深圳租房','杭州租房','南京租房','成都租房','大连租房','广州租房','苏州租房','天津租房','重庆租房','武汉租房','西安租房','郑州租房','宁波租房','嘉兴租房'],
            arr4:['合租','整租'],
            qu:[],
            subway:[],
        }
    },
    mounted(){
      this.axios.get('v1/house/qu',{params:{cid:this.cid}}).then(res=>{
        this.qu=res.data
    })
    this.axios.get('v1/house/sub',{params:{cid:this.cid}}).then(res=>{
        this.subway=res.data;
    })
    },
    watch:{
        city(){
            console.log(this.cid)
             this.axios.get('v1/house/qu',{params:{cid:this.cid}}).then(res=>{
        this.qu=res.data
    })
    this.axios.get('v1/house/sub',{params:{cid:this.cid}}).then(res=>{
        this.subway=res.data;
    })    
    }
    }
}
</script>
<style scoped>
body footer .f_up {
    height: 190px;
    background-color: #d72a3a;
    background-position: center;
    position: relative;
}

body footer .f_up>div { 
    margin: 0 auto;
    width: 1190px;
    height: 100%;
}

body footer .f_up>div div:nth-child(1) {
    width: 200px;
    height: 100%;
    position: absolute;
    top: 21px;
}

body footer .f_up>div div:nth-child(2) {
    margin-left: 300px;
    width: 990px;
    height: 100%;
}

body footer .f_up>div div:nth-child(2) img {
    height: 150px;
    margin-top: 15px;
}

body footer .f_down {
    /* height: 720px; */
    background-color: #3b3d42;
}

body footer .f_down ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body footer .f_down>div {
    width: 1190px;
    height: 100%;
    margin: 0 auto;
    font-size: 16px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2) {
    border-bottom: 0;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p {
    margin: 5px 0;
    padding: 0;
    font-weight: 300;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p img {
    margin-bottom: -4px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(2)>p>span:nth-child(1) {
    display: inline-block;
    width: 300px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) {
    margin-top: 10px;
    width: 1190px;
    border-bottom: 0;
    color: #aaacb3;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(1) {
    float: left;
    width: 650px;
    border-right: 1px solid #595b5f;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) {
    float: right;
    width: 450px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2) img {
    margin-left: 20px;
    margin-top: 15px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(1) {
    width: 250px;
    float: left;
    border-right: 0;
    text-align: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div:nth-child(2)>div:nth-child(2) {
    width: 200px;
    float: left;
    text-align: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a {
    text-decoration: none;
    color: #aaacb3;
    font-size: 18px;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li a:hover {
    color: #fff;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li {
    margin-right: 80px;
    float: left;
    text-align: left;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p {
    font-weight: 500;
    margin: 5px 0;
    font-size: 16px;
    color: #8b8d92;
}

body footer .f_down>div>div:nth-child(2)>div:nth-child(1) div ul li p:hover {
    color: white;
    cursor: pointer;
}

body footer .f_down>div>div>div {
    border-bottom: 1px solid #595b5f;
    padding-top: 20px;
    padding-bottom: 20px;
}

body footer .f_down>div>div>div ul {
    padding-top: 5px;
}

body footer .f_down>div>div>div>ul li {
    float: left;
    margin-right: 10px;
}

body footer .f_down>div>div>div>ul li a {
    text-decoration: none;
    color: #8b8d92;
}

body footer .f_down>div>div>div>ul li a:hover {
    color: #ffffff;
}

body footer .f_down>div>div>div::after {
    content: '';
    display: block;
    clear: both;
}

body footer .f_down>div p {
    text-align: left !important;
    margin: 0;
    font-weight: 600;
    color: #aaacb3;
}
</style>